<template>
	<view class="feedback-container">
		<!-- 反馈类型选择 -->
		<view class="feedback-type">
			<view class="section-title">反馈类型</view>
			<view class="type-list">
				<view 
					class="type-item" 
					v-for="(type, index) in feedbackTypes" 
					:key="index"
					:class="{ active: currentType === index }"
					@tap="selectType(index)"
				>{{ type }}</view>
			</view>
		</view>
		
		<!-- 反馈内容 -->
		<view class="feedback-content">
			<view class="section-title">反馈内容</view>
			<textarea 
				class="content-input"
				v-model="content"
				placeholder="请详细描述您遇到的问题或建议..."
				:maxlength="500"
				show-confirm-bar="false"
			></textarea>
			<view class="word-count">{{ content.length }}/500</view>
		</view>
		
		<!-- 图片上传 -->
		<view class="upload-images">
			<view class="section-title">
				<text>图片（选填，最多4张）</text>
				<text class="tip">便于我们更好地了解问题</text>
			</view>
			<view class="image-list">
				<view 
					class="image-item" 
					v-for="(image, index) in images" 
					:key="index"
				>
					<image :src="image" mode="aspectFill"></image>
					<text class="delete-btn" @tap="deleteImage(index)">×</text>
				</view>
				<view class="upload-btn" @tap="chooseImage" v-if="images.length < 4">
					<text class="iconfont icon-add"></text>
					<text>上传图片</text>
				</view>
			</view>
		</view>
		
		<!-- 联系方式 -->
		<view class="contact-info">
			<view class="section-title">联系方式（选填）</view>
			<input 
				type="text"
				class="contact-input"
				v-model="contact"
				placeholder="请留下您的手机号或邮箱，方便我们回复您"
			/>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn" :class="{ disabled: !isValid }" @tap="submitFeedback">
			提交反馈
		</view>
		
		<!-- 反馈记录入口 -->
		<view class="history-link" @tap="goToHistory">
			<text>反馈记录</text>
			<text class="iconfont icon-arrow-right"></text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			feedbackTypes: ['功能异常', '产品建议', '内容相关', '其他问题'],
			currentType: 0,
			content: '',
			images: [],
			contact: ''
		}
	},
	computed: {
		isValid() {
			return this.content.trim().length > 0
		}
	},
	methods: {
		selectType(index) {
			this.currentType = index
		},
		chooseImage() {
			uni.chooseImage({
				count: 4 - this.images.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.images = [...this.images, ...res.tempFilePaths]
				}
			})
		},
		deleteImage(index) {
			this.images.splice(index, 1)
		},
		submitFeedback() {
			if (!this.isValid) return
			
			uni.showLoading({
				title: '提交中...'
			})
			
			// 这里模拟提交，实际应该调用API
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				
				// 清空表单
				this.content = ''
				this.images = []
				this.contact = ''
				
				// 延迟返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}, 1500)
		},
		goToHistory() {
			uni.navigateTo({
				url: '/pages/feedback-history/feedback-history'
			})
		}
	}
}
</script>

<style lang="scss">
.feedback-container {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 20rpx;
	
	.section-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.tip {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.feedback-type {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.type-list {
			display: flex;
			flex-wrap: wrap;
			
			.type-item {
				width: calc(50% - 20rpx);
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #f5f5f5;
				border-radius: 10rpx;
				margin: 10rpx;
				font-size: 28rpx;
				color: #666;
				
				&.active {
					background: #e8f6e8;
					color: #3cc51f;
				}
			}
		}
	}
	
	.feedback-content {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.content-input {
			width: 100%;
			height: 300rpx;
			background: #f5f5f5;
			border-radius: 10rpx;
			padding: 20rpx;
			font-size: 28rpx;
			color: #333;
		}
		
		.word-count {
			text-align: right;
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
		}
	}
	
	.upload-images {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.image-list {
			display: flex;
			flex-wrap: wrap;
			
			.image-item {
				width: 160rpx;
				height: 160rpx;
				margin: 10rpx;
				position: relative;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
				
				.delete-btn {
					position: absolute;
					right: -16rpx;
					top: -16rpx;
					width: 40rpx;
					height: 40rpx;
					line-height: 36rpx;
					text-align: center;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					color: #fff;
					font-size: 32rpx;
				}
			}
			
			.upload-btn {
				width: 160rpx;
				height: 160rpx;
				margin: 10rpx;
				background: #f5f5f5;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.iconfont {
					font-size: 48rpx;
					color: #999;
					margin-bottom: 10rpx;
				}
				
				text {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
	
	.contact-info {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		
		.contact-input {
			height: 80rpx;
			background: #f5f5f5;
			border-radius: 10rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #333;
		}
	}
	
	.submit-btn {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #3cc51f;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		margin: 0 30rpx;
		
		&.disabled {
			opacity: 0.5;
		}
	}
	
	.history-link {
		text-align: center;
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #666;
		
		.iconfont {
			font-size: 24rpx;
			margin-left: 6rpx;
		}
	}
}
</style> 